<template>
  <basic-dialog
    title="查看资质详情"
    width="65%"
    destroyOnClose
    :visible="dialogVisible"
    :showFooter="false"
    :handleClose="handleClose"
  >
    <el-form
      ref="formData"
      label-width="120px"
      class="form_wrap"
      :model="formData"
    >
      <el-form-item
        v-for="item in formItemList"
        :key="item.key"
        :label="`${item.label}：`"
      >
        <template v-if="item.type === 'image'">
          <ImageListView
            :dataSource="formData[item.key]"
            :zIndex="3003"
          ></ImageListView>
        </template>
        <template v-else-if="item.type === 'file'">
          <el-link
            type="primary"
            :underline="false"
            @click="() => { handlePreviewFile(formData[item.key].url) }"
          >{{ formData[item.key] && formData[item.key].name }}
          </el-link>
        </template>
        <template v-else>
          <span>{{ formData[item.key] }}</span>
        </template>
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import { isResponseSuccess } from '@/utils/bizUtils';
import { getEchoTextByValue } from '@/utils/getUtils';
import BasicDialog from '@/components/BasicDialog';
import ImageListView from './ImageListView';
export default {
  components: { BasicDialog, ImageListView },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    uuid: { // 查询所需资质uuid
      type: String,
      required: true
    }
  },
  data () {
    return {
      dialogVisible: false,
      formItemList: [
        { label: '资质名称', key: 'qualificationName' },
        { label: '检验类型', key: 'examineCateStr' },
        { label: '是否原件', key: 'originalStr' },
        { label: '资质类型', key: 'qualificationCateStr' },
        { label: '供应商', key: 'supplyName' },
        { label: '使用区域', key: 'appliedAreaName' },
        { label: '过期时间', key: 'expireDate' },
        { label: '上传文件', key: 'fileList', type: 'file' },
        { label: '上传图片', key: 'imageList', type: 'image' },
        { label: '介绍', key: 'note' },
      ],
      formData: {},
      apiObj: {
        getFormData: {
          url: '/sysback/qualification/getQuaByUuid',
          type: 'get'
        },
        quaTypeProductList: {
          url: '/sysback/quatype/quaTypeProductList',
          type: 'post'
        }
      }
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
      if (val) {
        this.$nextTick(() => {
          this.getFormDataByInit();
        });
      }
    }
  },
  methods: {
    // 关闭弹框
    handleClose () {
      this.$emit('update:visible', false);
    },
    // 预览pdf文件
    handlePreviewFile (url) {
      window.open(url, '_blank');
    },
    // 设置初始化formData
    async setFormData (data) {
      const {
        qualificationName, examineCate, original, qualificationCate, supplyName,
        appliedAreaName, expireDate, imageList, fileList, note
      } = data;
      this.formData = {
        qualificationName,
        examineCateStr: this.getExamineCateStr(examineCate),
        originalStr: getEchoTextByValue({ val: original }),
        qualificationCateStr: await this.getQualificationCateStr(qualificationCate),
        supplyName,
        appliedAreaName,
        expireDate,
        imageList: this.getImageList(imageList),
        fileList: this.getFileList(fileList)[0],
        note
      }
    },
    // 获取检验类型文本
    getExamineCateStr (val) {
      const valByNames = {
        '1': '全检',
        '2': '抽检',
        '3': '通用',
      }
      return valByNames[val];
    },
    // 获取资质类型文本
    async getQualificationCateStr (val) {
      const { url, type } = this.apiObj.quaTypeProductList;
      const res = await ApiRequest(url, type);
      if (isResponseSuccess(res)) {
        const quaType = res.retData.find(item => item.quaTypeNo === val);
        return quaType.quaTypeName
      }
    },
    // 获取文件集合
    getFileList (list) {
      return list.map(item => {
        return {
          url: item.previewUrl,
          name: item.attachmentUrl.split('/').pop()
        }
      });
    },
    // 获取图片集合
    getImageList (list) {
      return list.map(item => {
        return { url: item.previewUrl }
      });
    },
    // 获取表单内容
    getFormDataByInit () {
      const { url, type } = this.apiObj.getFormData;
      this.getRequestFormData({
        url: `${url}?uuid=${this.uuid}`,
        type
      }).then(retData => {
        if (retData) {
          this.setFormData(retData);
        }
      });
    },
    // get请求form表单数据
    async getRequestFormData ({ url, type, data = {}, isFormData = false }) {
      let loadingInstance = this.$loading({ target: '.form_wrap' });
      try {
        const res = await ApiRequest(url, type, data, isFormData);
        loadingInstance.close();
        if (isResponseSuccess(res)) {
          return res.retData;
        }
      } catch (err) {
        loadingInstance.close();
      }
    }
  }
}
</script>
